<template>
	<view class="container">
		<!-- 头部页签 -->
		<view class="header" ref="formRef">
			<my-tab :tabData="tabData" :tabCurrent="tabCurrent" @handleClick="handleTabClick"></my-tab>
		</view>
		<!-- 颈部查询 -->
		<view class="navbar">
			<view class="notice-bar">
				{{ notice }}
			</view>
		</view>
		<!-- 数据表格 -->
		<view class="content">
			<view class="table-head">
				<u-table>
					<u-tr>
						<u-th v-for="(col,colIndex) in tableDatas.columns" :key="colIndex+'-'+tabCurrent"
							:width="col.width">
							<template v-if="col.type==='checkbox'">
								<u-checkbox v-model="tableDatas.selectAll" @click.native="selectAll()"></u-checkbox>
							</template>
							<template v-else>
								{{col.label}}
							</template>
						</u-th>
					</u-tr>
				</u-table>
			</view>
			<view class="table-body">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower()"
					:lower-threshold="3">
					<u-table font-size="24">
						<u-tr v-for="(row,rowIndex) in tableDatas.datas" :key="rowIndex+'-'+tabCurrent">
							<u-td v-for="(col,colIndex) in tableDatas.columns" :key="colIndex" :width="col.width"
								:class="`col-${colIndex} ${col.prop==='edit'?'col-edit':''}`">
								<template v-if="col.type==='checkbox'">
									<u-checkbox v-model="row[col.prop]"></u-checkbox>
								</template>
								<template v-else-if="col.type==='numberbox'">
									<u-input v-model="row[col.prop]" :placeholder="col.placeholder||'请输入'"
										type="number"></u-input>
								</template>
								<template v-else>
									{{ row[col.prop]}}
								</template>

							</u-td>
						</u-tr>
						<u-loadmore :status="tableDatas.loadmoreVisible" @loadmore="loadMore()" color="#3e82f9" />
					</u-table>
				</scroll-view>
			</view>
		</view>
		<!-- 底部数量统计 -->
		<view class="footer">
			<u-button type="success" @click="showConfirm(0)" v-if="hasPermission" :disabled="disabled">批量发料</u-button>
			<u-button type="primary" @click="showConfirm(1)" v-if="hasPermission" :disabled="disabled">一键直发</u-button>
		</view>
	</view>
</template>

<script>
	import myTab from '@/components/myTabs/index.vue'
	export default {
		components: {
			myTab
		},
		data() {
			return {
				tabData: ['待发料', '已完成'],
				tabCurrent: 0,
				formList: [{
						label: 'PO：',
						prop: 'SourceOrderNo',
						placeholder: '请输入PO号'
					},
					{
						label: '组件：',
						prop: 'MaterialName',
						placeholder: '请输入组件'
					}
				],
				form: {
					page: 1,
					rows: 50,
				},
				tableDatas: {
					dicID: 118,
					datas: [],
					columns: [{
							prop: 'isChecked',
							label: '',
							width: '10%',
							type: 'checkbox'
						},
						{
							prop: 'Code',
							label: '图号',
							width: '30%'
						},
						{
							prop: 'UnIssuedQty',
							label: '未领',
							width: '15%'
						},
						{
							prop: 'ThisIssuedQty',
							label: '发料数',
							width: '15%',
							type: 'numberbox'
						},
						{
							prop: 'StockQty',
							label: '库存',
							width: '15%'
						},
						{
							prop: 'ShelvesCode',
							label: '储位',
							width: '15%'
						},

					],
					formData: {},
					loading: false,
					loadmoreVisible: 'loadmore',
					loadText: '滚动或点击加载更多',
					count: 0,
					selectAll: false
				},
				rowDatas: {},
				notice: '提示：',
				hasPermission: false,
				disabled: true, // 按钮是否可编辑 已出货订单不可修改
			}

		},
		onLoad(options) {
			// 权限管理
			const resulut = this.$store.getters.userInfo.RoleMap?.some(val => val.RoleID === 'E01Admin' || val.RoleID ===
				'R2309260003') // 管理员和仓管人员
			this.$set(this, 'hasPermission', resulut)
			this.rowDatas = options.row ? JSON.parse(options.row) : {}
			const data = this.rowDatas
			if (data.ProductionStatus !== 12) this.disabled = false
			this.notice = `提示:${data.SourceOrderNo||''},${data.MaterialName}正在发料`
			this.formList.forEach(val => {
				this.$set(this.form, val.prop, val.value || null)
			})
			this.getApsData()
		},
		methods: {
			handleTabClick(index) {
				if (index === this.tabCurrent) return
				this.form.page = 1
				this.tabCurrent = index
				this.getApsData()
			},
			formatDate(val, format = 'yyyy-mm-dd') {
				return this.$u.timeFormat(new Date(val), format)
			},
			dataSearch() {
				this.form.page = 1
				this.getApsData()
			},
			// 获取数据
			async getApsData(remark = 0) {
				const condition = {
					dicID: this.tableDatas.dicID,
					IsCompleted: this.tabCurrent,
					ParentID: this.rowDatas.OrderBOMID
				}
				Object.assign(condition, this.form)
				this.tableDatas.loading = true
				if (this.form.page === 1) {
					this.tableDatas.datas.length = 0
				}
				this.setLoadmore('loading')
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				this.tableDatas.loading = false
				if (!res) return
				const {
					result,
					msg,
					data,
					count
				} = res
				if (!result) return uni.showToast({
					title: msg,
					icon: 'error'
				})
				if (res.result) {
					this.$set(this.tableDatas, 'count', count)
					if (!res.data.length) {
						this.setLoadmore('nomore')
					} else {
						if (this.tabCurrent === 0) data.forEach(val => val.ThisIssuedQty = val.UnIssuedQty)
						this.tableDatas.datas.push(...res.data)
						this.setLoadmore('loadmore')
					}
				} else {
					return Promise.reject()
				}
			},
			// 加载更多
			loadMore() {
				if (this.tableDatas.loadmoreVisible === 'nomore') return
				this.form.page++
				this.getApsData()
			},
			//配置加载更多
			setLoadmore(status = 'loadmore') {
				const textMenu = {
					loadmore: '滑动或点击加载更多',
					loading: '加载中...',
					nomore: '已无更多数据',
				}
				this.$set(this.tableDatas, 'loadmoreVisible', status)
				this.$set(this.tableDatas, 'loadmoreText', textMenu[status])
			},
			// 表格滚动到底部
			scrolltolower() {
				this.loadMore()
			},
			selectAll() {
				this.tableDatas.datas.forEach(val => {
					this.$set(val, 'isChecked', this.tableDatas.selectAll)
				})
			},
			//发料二次确认
			showConfirm(type = 0) {
				const submitData = this.tableDatas.datas.filter(val => val.isChecked)
				let message = '';
				if (!submitData?.length) message = '请选择要发出的物料';
				const errorData = submitData.filter(val => !val.ThisIssuedQty)
				if (errorData.length) message = '请填入发料数量'
				if (message) return uni.showToast({
					title: message,
					icon: 'none'
				})
				// 上面部分处理数据校验，通过后打开二次确认弹窗
				uni.showModal({
					title: '提示',
					content: '确认提交数据吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击确认
							submitData.forEach((val) => {
								val.Type = type;
							});
							this.batchOutbound(submitData)
						} else if (res.cancel) {
							// 用户点击取消
							uni.showToast({
								title: '已取消',
								icon: 'none'
							});
						}
					}
				});
			},
			// 批量发料&一键发料
			async batchOutbound(submitData) {
				const res = await this.$request.post({
					url: '/APSAPI/IssueByOrderBomID',
					data: submitData
				}).catch(err => err)
				if (!res) return
				const {
					result,
					msg
				} = res
				this.dataSearch()
				uni.showModal({
					title: '提示',
					content: res.msg || '操作成功',
					showCancel: false,
				})


			},
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.header {
			height: 81rpx;
			// border-bottom: 1px solid $uni-border-color;
		}

		.navbar {
			padding: 0 10rpx;
			height: 50rpx;

			.notice-bar {
				background-color: #fdf6ec;
				color: $uni-color-warning;
				height: 100%;
				width: 100%;
			}

		}

		.content {
			height: calc(100vh - 231rpx);
			width: 100%;
			// flex: 1;
			display: flex;
			flex-direction: column;
			padding: 10rpx 10rpx 20rpx;
			overflow: hidden;

			.table-head {}

			.table-body {
				flex-grow: 1;
				width: 100%;
				overflow: hidden;

				uni-scroll-view {
					height: 100%;
				}

				.u-table {
					width: 100%;
					overflow-y: auto;
					overflow-x: hidden;
				}
			}

			.u-td,
			.u-th {
				white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				min-width: 0 !important;
				/* 关键属性 */
				flex-shrink: 0 !important;
				/* 防止flex容器压缩 */
			}

			.u-td {
				height: 60rpx;
			}

			.col-1 {
				white-space: pre-wrap !important;
				font-weight: bold;
			}

			.col-0 {
				// font-size: 18rpx !important;	
				white-space: pre-wrap !important;

			}

			.col-3 {
				// color: red !important;
				background-color: rgb(251, 255, 202) !important;
			}

			.col-1,
			.col-2,
			.col-3,
			.col-4 {
				font-weight: bold;
			}

			.col-2 {
				color: red !important;
			}

		}

		.footer {
			height: 100rpx;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// padding-right: 20rpx;
		}
	}
</style>